<template>
  <div class="license">
    <div class="license-header">
      <span>系统信息</span>
    </div>
    <div class="license-content">
      <div class="license-form">

        <a-row class="license-item">
          <a-col :span="layout.left" class="license-left">
            <span>当前版本号:</span>
          </a-col>
          <a-col :span="layout.right" class="license-right">
            <span>{{ licenseInfo.systemVersion }}</span>
          </a-col>
        </a-row>

        <a-row class="license-item">
          <a-col :span="layout.left" class="license-left">
            <span>机器码:</span>
          </a-col>
          <a-col :span="layout.right" class="license-right">
            <span>{{ licenseInfo.machineCodeList }}</span>
          </a-col>
        </a-row>

        <a-row class="license-item">
          <a-col :span="layout.left" class="license-left">
            <span>授权用户数:</span>
          </a-col>
          <a-col :span="layout.right" class="license-right">
            <span>{{ licenseInfo.uesrNumber }}</span>
          </a-col>
        </a-row>

        <a-row class="license-item">
          <a-col :span="layout.left" class="license-left">
            <span>有效期:</span>
          </a-col>
          <a-col :span="layout.right" class="license-right">
            <span>{{ licenseInfo.expiration }}</span>
          </a-col>
        </a-row>

        <a-row class="license-item">
          <a-col :span="layout.left" class="license-left">
            <span>授权时间戳:</span>
          </a-col>
          <a-col :span="layout.right" class="license-right">
            <span>{{ licenseInfo.certificate }}</span>
          </a-col>
        </a-row>

        <a-row class="license-item">
          <a-col :span="layout.left" class="license-left">
            <span>更新日志:</span>
          </a-col>
          <a-col :span="layout.right" class="license-right">
            <a :href="licenseInfo.updateLogUrl" target="_blank">{{ licenseInfo.updateLogUrl }}</a>
            <!-- <span>{{ licenseInfo.certificate }}</span> -->
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import systemApi from '@/apis/system/system-manager.api';

@Component({
  name: 'license',
  components: {
  }
})
export default class License extends Vue {
  layout = {
    left: 3,
    right: 10
  };

  licenseInfo:any = {};

  created() {
    this.getLicenseInfo();
  }

  getLicenseInfo() {
    systemApi.getLicenseInfo().then((res:any) => {
      if (!res.errcode && res.data) {
        if (Array.isArray(res.data.machineCodeList)) {
          res.data.machineCodeList = res.data.machineCodeList.join(',');
        }
        this.licenseInfo = res.data;
      }
    });
  }

}
</script>
<style lang="less" scoped>
  .license{
    margin: 0 24px;
    height: 100%;
    &-header{
      padding: 13px 0;
      text-align: left;
      border-bottom: 1px solid rgba(232,232,232,1);
      span{
        font-weight: 500;
        font-size: 16px;
        line-height: 22px;
      }
    }
    &-content{
      .license-form{
        max-width: 700px;
        margin-top: 24px;
        .license-item{
          line-height: 32px;
          margin-bottom: 20px;
          color: rgba(0, 0, 0, 0.65);
          text-align: left;
          .license-right{
            color: rgba(0, 0, 0, 0.85);
            a{
              color: @primary-color;
            }
          }
        }
      }
    }
  }
</style>
